<template>
  <div>

    <div class="layui-container fly-marginTop">
      <div class="fly-panel" pad20 style="padding-top: 5px;">
<!--        <div class="fly-none">没有权限</div>-->
        <div class="layui-form layui-form-pane">
          <div class="layui-tab layui-tab-brief" lay-filter="user">
            <ul class="layui-tab-title">
              <li class="layui-this">发表新帖</li>
            </ul>
            <div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">
              <div class="layui-tab-item layui-show">
                  <div class="layui-row layui-col-space15 layui-form-item">
                    <div class="layui-col-md3">
                      <label class="layui-form-label">所属分类</label>
                      <div class="layui-input-block">

                        <div class="layui-unselect layui-form-select" :class="cateClass">
                          <div class="layui-select-title"
                               @click="clickOption"
                          >
                            <input type="text" placeholder="请选择" v-model="cate" readonly="" class="layui-input layui-unselect">
                            <i class="layui-edge"></i>
                          </div>
                          <dl class="layui-anim layui-anim-upbit"
                              v-show="selectOption"
                          >
                            <dd
                                @click="checkOption(item.id, item.name)"
                                v-for="item of cateList"
                                :key="item.id"
                                v-text="item.name"
                            >
                            </dd>
                          </dl>
                        </div>
                      </div>
                    </div>
                    <div class="layui-col-md9">
                      <label for="L_title" class="layui-form-label">标题</label>
                      <div class="layui-input-block">
                        <input type="text" id="L_title" v-model="title" required lay-verify="required" autocomplete="off" class="layui-input">
                      </div>
                    </div>
                  </div>

                  <div class="layui-form-item layui-form-text">
                        <Tinymce
                         @watchContent="watchContent"
                         :content="content"
                        >
                        </Tinymce>
                  </div>

                  <div class="layui-form-item">
                    <label for="L_vercode" class="layui-form-label">人类验证</label>
                    <div class="layui-input-inline">
                      <input type="text" id="L_vercode" v-model="code" required lay-verify="required" placeholder="请回答后面的问题" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid">
                      <span style="color: #cc0000;">{{one}} + {{two}} = ?</span>
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <button class="layui-btn" @click="submitForm">立即发布</button>
                  </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import Tinymce from "@/pages/common/Tinymce";
import {category, publish, editPublish} from "@/api";
import {message} from "@/element/message";
import {detail} from "@/api/detail";

export default {
  name: 'PublishContent',
  components: {
    Tinymce
  },
  data() {
    return {
      title: '',
      content: '',
      cateList: [],
      cate: '', // 分类名
      cateId: 0, // 分类ID
      selectOption: false,
      code: '',
      one: Math.floor(Math.random()*10),
      two: Math.floor(Math.random()*10)
    }
  },
  methods: {
    getCategory: function () {
      category('publish').then(this.getCategorySucc)
    },
    getCategorySucc: function (res) {
      this.cateList = res.data.data
    },
    getDetail: function () {
      detail(this.$route.params.id).then(this.getIndexSucc)
    },
    getIndexSucc: function (res) {
      res = res.data.data.detail
      this.content = res.body
      this.title = res.title
      this.cateId = res.category_id
      //console.log(this.cateList)
      console.log(res)
      this.cateList.forEach(item =>{
        if (item.id == this.cateId) {
          this.cate = item.name
        }
      })
    },
    clickOption: function () {
      this.selectOption = !this.selectOption
    },
    checkOption: function (id, name) {
      this.selectOption = false
      this.cate = name
      this.cateId = id
    },
    watchContent: function (content) {
      this.content = content
    },
    submitForm: function () {
      if (this.code != this.one + this.two) {
        message('人类验证错误', 'warning')
        return
      }

      // 编辑
      if (this.$route.params.id) {
        editPublish(this.$route.params.id, this.title, this.cateId, this.content).then(this.submitFormSucc)
      } else {
        // 发布
        publish(this.title, this.cateId, this.content).then(this.submitFormSucc)
      }
    },
    submitFormSucc: function (res) {
      console.log(res)
      message('发布成功')
      this.$router.push({
        path:'/detail/' + res.data.data
      })
    }
  },
  computed: {
    cateClass: function () {
      if (this.selectOption == true) {
        return 'layui-form-selected'
      } else {
        return 'layui-form-select'
      }
    }
  },
  mounted () {
    this.getCategory()
    // 如果传值了代表是编辑页面
    if (this.$route.params.id) {
      this.getDetail()
    }
  }
}
</script>
